<template>
  <v-container>
    <v-row class="text-right" justify="end">
      <v-col class="text-right">
        <v-text-field
            v-model="pageClientRequest.code"
            density="compact"
            variant="outlined"
            :label="$t('table.header.client.code')"
            :placeholder="$t('placeholder.common.code')"
            clearable :counter=addClientValidationConfig.code :maxlength=addClientValidationConfig.code
        />
      </v-col>
      <v-col>
        <v-text-field
            v-model="pageClientRequest.name"
            density="compact"
            variant="outlined"
            :label="$t('table.header.client.name')"
            :placeholder="$t('placeholder.common.name')"
            clearable :counter=addClientValidationConfig.name :maxlength=addClientValidationConfig.name
        />
      </v-col>
      <v-col class="text-right">
        <v-autocomplete
            v-model="pageClientRequest.status" density="compact"
            variant="outlined" :label="$t('table.header.client.status')"
            :placeholder="$t('placeholder.common.select')" :items="statusList" item-title="name"
            item-value="code" clearable/>
      </v-col>
    </v-row>
    <v-row class="text-right" justify="end">
      <button-add @click="goSearchEvent()"></button-add>
      <button-search @click="goSearchEvent()"></button-search>
    </v-row>
    <v-row>
      <v-col cols="4" v-for="client in clientList" :key="client.id">
        <v-card density="compact">
          <v-card-item>
            <v-card-title>
              {{ client.name }}|{{ client.code }}
            </v-card-title>
            <template v-slot:append>
              <v-switch :model-value="client.status.code===ENABLE_VALUE"
                        color="info"
                        justify="center" @update:model-value="goSwitchEvent(client)"
              >
              </v-switch>
            </template>
            <v-card-subtitle v-if="showHeaderKey('category',clientHeaders)"> {{
                client.category.name
              }}
            </v-card-subtitle>
          </v-card-item>
          <v-card-text>
            {{ client.remark || $t('text.common.noData') }}
          </v-card-text>
          <v-card-actions>
            <button-reset></button-reset>
            <button-edit></button-edit>
            <button-log></button-log>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
    <v-pagination
        v-model="currentPage"
        :length="totalPage"
        :total-visible="totalVisible"
    />
  </v-container>
</template>
<script setup lang="ts">
import {ENABLE_VALUE, LAYOUT_MAIN, TITLE_CLIENT} from "~/resource/constants/common/constant";
import {clientHeaders} from "~/resource/constants/tables/client";
import {Dictionary} from "~/resource/types/common/dictionary";
import {PageClientRequest} from "~/resource/types/client/page-client-request";
import {Client} from "~/resource/types/client/client";
import {showHeaderKey} from "~/utils/show-table-header";
import {useSuccessNotification} from "~/utils/use-notification";
import {AddClientValidationConfig} from "~/resource/types/client/add-client-validation-config";
import type {User} from "~/resource/types/user/user";

definePageMeta({
  layout: LAYOUT_MAIN,
  title: TITLE_CLIENT
});
const appConfig = useAppConfig();
const currentPage = ref<number>(appConfig.page?.defaultCurrentPage || 0);
const totalVisible = ref<number>(appConfig.page?.defaultTotalVisible || 0);
const totalPage = ref<number>(0);
const clientList = ref<Array<Client>>([]);
const statusList = ref<Array<Dictionary>>([]);
const localization = useI18n();
const pageClientRequest = ref<PageClientRequest>(new PageClientRequest(null, null, ENABLE_VALUE, null));
const snackbar = useSnackbar();
const addClientValidationConfig = ref<AddClientValidationConfig>(new AddClientValidationConfig(appConfig.validation.client.code, appConfig.validation.common.nameMaxLength));
const selectClientPage = () => {
  clientList.value = [];
  clientList.value.push(new Client(1, "0001", "web应用", new Dictionary("WEB", "0"), new Dictionary("启用", "0"), "这是一个描述"));
  clientList.value.push(new Client(1, "0002", "web应用1", new Dictionary("IOS", "001"), new Dictionary("启用", "1"), "这是一个描述"));
  totalPage.value = 1;
}

const getStatusList = () => {
  statusList.value.push(new Dictionary("启用", "0"));
  statusList.value.push(new Dictionary("禁用", "1"));
  selectClientPage();
}


const goSwitchEvent = (item: Client) => {
  if (ENABLE_VALUE === item.status.code) {
    useConfirmDialog(localization.t('text.common.prompt'), localization.t('text.client.disabled'), disabledEvent, selectClientPage);
  } else {
    useConfirmDialog(localization.t('text.common.prompt'), localization.t('text.client.enabled'), enabledEvent, selectClientPage);
  }
}


const enabledEvent = () => {
  snackbar.add(useSuccessNotification('起用成功'))
  return true;
}

const disabledEvent = () => {
  snackbar.add(useSuccessNotification('禁用成功'))
  return true;
}


const goSearchEvent = () => {
  usePostEventFetch<User>("/users/list", {});
}


getStatusList();
watch(currentPage,
    () => {
      selectClientPage();
    }
)
</script>